@use './common/config.scss' as *;
@import './common';
@import './tasklist';

@mixin editor {
  .ql-container.ql-snow {
    background-color: getCssVar(editor-bg-color);
  }

  .ql-editor {
    padding-bottom: 33px;
    font-size: $defaultFontSize;

    &.ql-blank::before {
      color: #8a8e99;
    }

    h1,
    h2,
    h3 {
      margin-top: 20px;
      margin-bottom: 10px;
    }

    h1 {
      font-size: 30px;
    }

    h2 {
      font-size: 20px;
      font-weight: bold;
    }

    ol,
    ul {
      margin: 0 0 10px;
      list-style: none;
    }

    li {
      margin: 0 0 5px;
    }

    b,
    strong {
      font-weight: bold;
    }

    em {
      font-style: italic;
    }

    s {
      text-decoration: line-through;
    }

    u.ql-custom-strike {
      text-decoration: line-through;
    }

    u {
      text-decoration: underline;
    }

    a {
      text-decoration: underline;
      color: #5e7ce0;

      img {
        border: solid 1px #526ecc;
      }
    }

    td ol {
      counter-reset: list-0 0;
    }

    .ql-ui {
      position: absolute;
      color: #000;
    }

    li > .ql-ui {
      bottom: 0;
    }

    // 列表
    li::before {
      display: inline-block;
      margin-left: -1.5em;
      margin-right: 0.3em;
      text-align: right;
      white-space: nowrap;
      width: 1.2em;
    }

    li.bullet::before {
      content: '\2022';
    }

    li.ordered {
      counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
      counter-increment: list-0;
    }

    li.ordered::before {
      content: counter(list-0, decimal) '. ';
    }

    li.ordered.ql-indent-1 {
      counter-increment: list-1;
    }

    li.ordered.ql-indent-1::before {
      content: counter(list-1, lower-alpha) '. ';
    }

    li.ordered.ql-indent-1 {
      counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
    }

    li.ordered.ql-indent-2 {
      counter-increment: list-2;
    }

    li.ordered.ql-indent-2::before {
      content: counter(list-2, lower-roman) '. ';
    }

    li.ordered.ql-indent-2 {
      counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
    }

    li.ordered.ql-indent-3 {
      counter-increment: list-3;
    }

    li.ordered.ql-indent-3::before {
      content: counter(list-3, decimal) '. ';
    }

    li.ordered.ql-indent-3 {
      counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
    }

    li.ordered.ql-indent-4 {
      counter-increment: list-4;
    }

    li.ordered.ql-indent-4::before {
      content: counter(list-4, lower-alpha) '. ';
    }

    li.ordered.ql-indent-4 {
      counter-reset: list-5 list-6 list-7 list-8 list-9;
    }

    li.ordered.ql-indent-5 {
      counter-increment: list-5;
    }

    li.ordered.ql-indent-5::before {
      content: counter(list-5, lower-roman) '. ';
    }

    li.ordered.ql-indent-5 {
      counter-reset: list-6 list-7 list-8 list-9;
    }

    li.ordered.ql-indent-6 {
      counter-increment: list-6;
    }

    li.ordered.ql-indent-6::before {
      content: counter(list-6, decimal) '. ';
    }

    li.ordered.ql-indent-6 {
      counter-reset: list-7 list-8 list-9;
    }

    li.ordered.ql-indent-7 {
      counter-increment: list-7;
    }

    li.ordered.ql-indent-7::before {
      content: counter(list-7, lower-alpha) '. ';
    }

    li.ordered.ql-indent-7 {
      counter-reset: list-8 list-9;
    }

    li.ordered.ql-indent-8 {
      counter-increment: list-8;
    }

    li.ordered.ql-indent-8::before {
      content: counter(list-8, lower-roman) '. ';
    }

    li.ordered.ql-indent-8 {
      counter-reset: list-9;
    }

    li.ordered.ql-indent-9 {
      counter-increment: list-9;
    }

    li.ordered.ql-indent-9::before {
      content: counter(list-9, decimal) '. ';
    }

    li.ql-direction-rtl {
      &::before,
      &.checked > .ql-ui,
      &.unchecked > .ql-ui {
        margin-left: 0.3em;
        margin-right: -1.5em;
        text-align: left;
      }
    }

    // 任务列表
    @include tasklist;

    img {
      max-width: 100%;

      &.current-select-img::selection {
        background-color: transparent;
      }
    }

    .ql-file-item {
      margin: 0 4px;
      padding: 0 4px;
      white-space: nowrap;
      max-width: 90%;
      user-select: none;
      vertical-align: middle;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
      font-size: 14px;
      height: 28px;

      &.icon-file::before {
        position: absolute;
        left: 4px;
        top: 2px;
      }

      span {
        display: inline-flex;
        align-items: center;
        text-decoration: none;
      }

      svg {
        margin-right: 4px;
        fill: #5e7ce0;
        vertical-align: text-bottom;
      }
    }

    // 代码块
    code,
    .ql-code-block-container {
      background-color: #f8f8f8;
      border-radius: 3px;
    }

    code {
      font-size: 85%;
      padding: 2px 4px;
    }

    .ql-code-block-container {
      overflow: auto;
      padding: 9.5px;
      margin: 0 0 10px;
      word-break: normal;
      word-wrap: break-word;
      white-space: pre-wrap;
      font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
      font-size: 13px;
      border-radius: 1px;
      color: #252b3a;
      background-color: #f8f8f8;
      border: 1px solid #adb0b8;
    }

    // 表格
    table {
      margin: 0;

      tr {
        height: initial;
      }
    }

    td {
      border: 1px solid #adb0b8;
      padding: 5px 10px;
    }

    // 全局链接
    .ql-wiki-link,
    .ql-doc-link {
      display: inline-block;
      margin: 0 5px;
    }

    // 代码块
    blockquote {
      border-left: 4px solid #adb0b8;
      margin-bottom: 5px;
      margin-top: 5px;
      padding-left: 16px;
    }

    // @提醒
    @include mentionLink;
  }

  // fix: 解决ol中有内联list-style-type样式，.ql-editor样式（默认是none）会将其覆盖的问题
  .ql-editor ol li {
    list-style-type: inherit;
  }

  .ql-container .ql-editor {
    ol li {
      // 确保不影响编辑器里面的样式
      list-style-type: none;
    }

    // 暗黑模式
    li.checked,
    li.unchecked {
      color: #252b3a;
    }
  }
}

// 编辑器正文
@include editor;
// 编辑器外的任务列表
@include tasklistOutside;
